<template>
<!-- 下载器数据分析 - 打开数据分析 -->
<div class="block" v-loading="loading" element-loading-text="拼命加载中">
    <open-header @getMsg="getMsg" :baseExcelURL="baseExcelURL" :headerConfig="headerConfig"></open-header>
    <chart-modal :chartkey="chartOptionKeys.chart01" style="margin-top:10px;" v-bind:option="chartoptions.dataall" :chartConfig="chartConfig"></chart-modal>
    <div class="tableBorder">
        <el-table id="DataTable" :data="tableData" border>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="distributtionNum" label="分发数"></el-table-column>
            <el-table-column prop="getListRequestNum" label="getlist请求数"></el-table-column>
            <el-table-column prop="getListResponseNum" label="getlist回传数"></el-table-column>
            <el-table-column prop="getListResponseRate" label="getlist回传成功率(%)"></el-table-column>
            <el-table-column prop="getInfoRequestNum" label="getinfo请求数"></el-table-column>
            <el-table-column prop="getInfoResponseNum" label="打开数"></el-table-column>
            <el-table-column prop="getInfoResponseRate" label="getinfo成功率"></el-table-column>
            <el-table-column prop="openRate" label="打开率(%)"></el-table-column>
        </el-table>
        <el-pagination id="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20,30]" :pagem-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</div>
</template>

<script>
import OpenHeader from './header/OpenHeader';
import ChartModal from './ChartModal';
import {
    setdataAll01,
    getMax
} from '../config/setChart.js';
import {
    getChartConfig,
    HeaderConfig
} from '../config/toolsui.config.js';

export default {
    data() {
        return {
            baseExcelURL: '' + this.$store.state.domain + '/bzDCP/open/exportExcel',
            getOpenDataByConditionURL: '' + this.$store.state.domain + '/bzDCP/open/getOpenDataByCondition',
            currentPage: 1,
            pageSize: 10,
            total: 0,
            headerData: '',
            tableData: [],
            headerConfig: {},
            chartoptions: {
                dataall: {},
            },
            chartConfig: getChartConfig('100%', '500px'),
            chartOptionKeys: {
                chart01: 'chart01',
            },
            loading: false
        };
    },
    components: {
        OpenHeader,
        ChartModal,
    },
    created() {
        this.initDataAll();
    },
    methods: {
        getMsg(data) {
            this.headerData = data;
            this.search();
        },
        getData() {
            this.$ajax.get(this.getOpenDataByConditionURL).then(response => {
                this.getDataSearch(response);
            });
        },
        getDataSearch(response) {
            //获取表格数据
            let initialData = response.data.result;
            this.tableData = initialData;
            this.total = response.data.total;
            //获取图表数据
            var legends = [];
            var distributtionNum = [];
            var getListRequestNum = [];
            var getListResponseNum = [];
            var getInfoRequestNum = [];
            var getListResponseRate = [];
            var getInfoResponseRate = [];
            var getInfoResponseNum = [];
            var openRate = [];
            for (var i = 0; i < response.data.result.length; i++) {
                legends[i] = response.data.result[i].date;
                distributtionNum[i] = response.data.result[i].distributtionNum;
                getListRequestNum[i] = response.data.result[i].getListRequestNum;
                getListResponseNum[i] = response.data.result[i].getListResponseNum;
                getInfoRequestNum[i] = response.data.result[i].getInfoRequestNum;
                getListResponseRate[i] = response.data.result[i].getListResponseRate;
                getInfoResponseRate[i] = response.data.result[i].getInfoResponseRate;
                getInfoResponseNum[i] = response.data.result[i].getInfoResponseNum;
                openRate[i] = response.data.result[i].openRate;
            }
            var setMaxs = getMax([distributtionNum, getListRequestNum, getListResponseNum, getInfoRequestNum, getInfoResponseNum]);
            this.$store.state.chartOption['chart01'] = setdataAll01(
                legends.reverse(),
                [{
                        name: '分发数',
                        type: 'bar',
                        data: distributtionNum.reverse()
                    },
                    {
                        name: 'getlist请求数',
                        type: 'bar',
                        data: getListRequestNum.reverse()
                    },
                    {
                        name: 'getlist回传数',
                        type: 'bar',
                        data: getListResponseNum.reverse()
                    },
                    {
                        name: 'getinfo请求数',
                        type: 'bar',
                        data: getInfoRequestNum.reverse()
                    },
                    {
                        name: '打开数',
                        type: 'bar',
                        data: getInfoResponseNum.reverse()
                    },
                    {
                        name: 'getlist回传成功率',
                        type: 'line',
                        symbol: 'star',
                        data: getListResponseRate.reverse(),
                        yAxisIndex: 1
                    },
                    {
                        name: 'getinfo成功率',
                        type: 'line',
                        data: getInfoResponseRate.reverse(),
                        yAxisIndex: 1
                    },
                    {
                        name: '打开率',
                        type: 'line',
                        symbol: 'arrow',
                        data: openRate.reverse(),
                        yAxisIndex: 1
                    },
                ],
                '',
                [{
                    name: '',
                    formatter: '',
                    max: setMaxs
                }, {
                    name: '',
                    max: 100,
                    formatter: '%'
                }]
            );
        },
        search() {
            let _this = this.headerData;
            if (_this.starttime == null || _this.endtime == null) {
                this.$message.warning('查询条件不能为空！');
                return;
            } else if (_this.starttime > _this.endtime) {
                this.$message.warning('开始时间不能大于结束时间！');
                return;
            } else {
                this.loading = true;
                this.currentPage = 1;
                this.$ajax.post(this.getOpenDataByConditionURL,
                        this.qs.stringify({
                            starttime: _this.starttime,
                            endtime: _this.endtime,
                            appType: _this.appType,
                            channelType: _this.channelType,
                            appid: _this.appid,
                            area: _this.area,
                            prov: _this.prov,
                            winnt: _this.winnt,
                            wow: _this.wow,
                            resource: _this.resource,
                            soft: _this.soft,
                            antiVirus: _this.antiVirus,
                            isBar: _this.isBar,
                            isDev: _this.isDev,
                            radio: _this.radio,
                            check: _this.check,
                            isCom: _this.isCom,
                            currentPage: 1,
                            pageSize: this.pageSize
                        }, {
                            indices: false
                        })
                    )
                    .then(response => {
                        if (response.status == 200) {
                            this.getDataSearch(response);
                        } else {
                            this.$message.warning("网络错误！");
                            return;
                        }
                        this.loading = false;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        },
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage;
            let _this = this.headerData;
            this.loading = true;
            this.$ajax.post(this.getOpenDataByConditionURL,
                    this.qs.stringify({
                        starttime: _this.starttime,
                        endtime: _this.endtime,
                        appType: _this.appType,
                        channelType: _this.channelType,
                        appid: _this.appid,
                        area: _this.area,
                        prov: _this.prov,
                        winnt: _this.winnt,
                        wow: _this.wow,
                        resource: _this.resource,
                        soft: _this.soft,
                        antiVirus: _this.antiVirus,
                        isBar: _this.isBar,
                        isDev: _this.isDev,
                        radio: _this.radio,
                        check: _this.check,
                        isCom: _this.isCom,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }, {
                        indices: false
                    })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.getDataSearch(response)
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
        },
        handleSizeChange: function (pageSize) {
            this.pageSize = pageSize;
            this.currentPage = 1;
            let _this = this.headerData;
            this.loading = true;
            this.$ajax.post(this.getOpenDataByConditionURL,
                    this.qs.stringify({
                        starttime: _this.starttime,
                        endtime: _this.endtime,
                        appType: _this.appType,
                        channelType: _this.channelType,
                        appid: _this.appid,
                        area: _this.area,
                        prov: _this.prov,
                        winnt: _this.winnt,
                        wow: _this.wow,
                        resource: _this.resource,
                        soft: _this.soft,
                        antiVirus: _this.antiVirus,
                        isBar: _this.isBar,
                        isDev: _this.isDev,
                        radio: _this.radio,
                        check: _this.check,
                        isCom: _this.isCom,
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }, {
                        indices: false
                    })
                )
                .then(response => {
                    if (response.status == 200) {
                        this.getDataSearch(response);
                    } else {
                        this.$message.warning("网络错误！");
                        return;
                    }
                    this.loading = false;
                })
                .catch(function (error) {
                    console.log(error);
                    this.loading = true;
                });
        },
        initDataAll() {
            this.$store.state.chartOption = {
                chart01: {},
            };
            this.getData();
        },
    },
};
</script>

<style scoped>
</style>
